<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/react.production.min.js"></script>
    <!-- 核心库  最先引用 -->
    <script src="../js/react-dom.production.min.js"></script>
    <!-- 引用react-dom 用于支持react操作DOM -->
    <script src="../js/babel.min.js"></script>
    <!-- 引入babel 用于将jsx转为js -->
    <title>学习react</title>
</head>

<body>
    <div id="test"></div>
    <script type="text/babel"> // 此处一定要写babel
        // const mydata = [2,5,4,6,8,9]   //数组或自动遍历 对象不会
        // const VDOM = <div>{
        //     mydata.map((item,i)=>{
        //         return <li key={i}>{item}</li>
        //     })
        // }</div>
        // /*
        //     创建dom 不用写引号
        //     混入js表达式要用{}  
        //         表达式式可以用另一个值接收的
        //             a, a+b,arr.map,function,if(){},for(){},switch(){}
        //     类名要用className 但好像用class也行
        //     内联样式  style={{ color: 'red' }}
        //     只有一个根标签  标签必须闭合
        //     用组件 首字母要大写  首字母大写为组件 首字母小写为标签
        // */
        // ReactDOM.render(VDOM, document.getElementById('test')) //渲染
        const mydata = [
            { value: 1048, name: '常住人口' },
            { value: 735, name: '户籍人口' },
            { value: 580, name: '外出人口' },
            { value: 484, name: '流动人口' },
            { value: 300, name: '境外人口' }
        ]
        function VDOM(props) {
            const list = props.list.map((item, i) => {
                return <li key={i}>{item.name}{item.value}</li>
            })
            return <ul>{list}</ul>
        }
        ReactDOM.render(<VDOM list={mydata} />, document.getElementById('test'))
    </script>
</body>

</html>